<template>
  <div>
    <Table border :columns="columns" :data="fuyangList">
      <template slot-scope="{ row }" slot="DF003">
        <span v-if="row.DF003 === '10301001'">男</span>
        <span v-if="row.DF003 === '10301002'">女</span>
      </template>
      <template slot-scope="{ row }" slot="DF004">
        <div v-for="item in guanxi" v-bind:key="item.id" v-if="row.DF004 === item.id" >{{item.name}}</div>
      </template>
      <template slot-scope="{ row }" slot="DF005">
        <div v-for="item in shanfuyangnengli" v-bind:key="item.id" v-if="row.DF005 === item.id" >{{item.name}}</div>
      </template>
      <template slot-scope="{ row, index }" slot="action">
        <Button type="primary" style="margin-right: 5px" :disabled="paramsData.operation === '2'" @click="updateFuyang(row, index)">编辑</Button>
        <Button type="error" :disabled="paramsData.operation === '2'" @click="deleteFuyang(row, index)">删除</Button>
      </template>
    </Table>
    <Button style="width: 90%; margin: 10px 5%;" :disabled="paramsData.operation === '2'" type="dashed" @click="addFuyang">添加赡抚养信息</Button>
    <Modal v-model="fuyangModal" width="1000" title="添加赡抚养信息" @on-ok="addFuyangOk()"
           @on-cancel="fuyangModal = false">
      <Form ref="fuyangInfo" :model="fuyangInfo" label-position="right" :label-width="100">
        <Row :gutter="24">
          <Col span="12">
            <FormItem label="姓名" prop="DF001">
              <Input maxlength="18" v-model="fuyangInfo.DF001"/>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="身份证号" prop="DF002">
              <Input @on-change="checkCardno(fuyangInfo.DF002)" maxlength="18" v-model="fuyangInfo.DF002"/>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="性别" prop="DF003">
              <Select disabled v-model="fuyangInfo.DF003" clearable filterable>
                <Option value="10301001">男</Option>
                <Option value="10301002">女</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="与被赡抚养人关系" prop="DF004">
              <Select v-model="fuyangInfo.DF004" clearable filterable>
                <Option v-for="item in guanxi" v-bind:key="item.id" :value="item.id">{{item.name}}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="赡抚养能力" prop="DF005">
              <Select v-model="fuyangInfo.DF005" clearable filterable>
                <Option v-for="item in shanfuyangnengli" v-bind:key="item.id" :value="item.id">{{item.name}}</Option>
              </Select>
            </FormItem>
          </Col><Col span="12">
          <FormItem label="联系电话" prop="DF006">
            <Input maxlength="18" v-model="fuyangInfo.DF006"/>
          </FormItem>
        </Col>
        </Row>
      </Form>
    </Modal>
  </div>
</template>
<script>
import shanfuyangnengli from '../data/shanfuyangnengli.json'
import guanxi from '../data/guanxi.json'
export default {
  props: {
    paramsData: Object
  },
  data () {
    return {
      shanfuyangnengli: shanfuyangnengli,
      updateid: 0,
      guanxi: guanxi,
      fuyangInfo: {},
      updateState: false,
      fuyangModal: false,
      fuyangList: [],
      columns: [
        { title: '身份证号', key: 'DF002', minWidth: 150, align: 'center', fixed: 'left' },
        { title: '姓名', key: 'DF001', minWidth: 150, align: 'center', fixed: 'left' },
        { title: '性别', slot: 'DF003', minWidth: 150, align: 'center' },
        { title: '与被赡抚养人关系', slot: 'DF004', minWidth: 150, align: 'center' },
        { title: '赡抚养能力', slot: 'DF005', minWidth: 150, align: 'center' },
        { title: '联系电话', key: 'DF006', minWidth: 150, align: 'center' },
        { title: '操作', slot: 'action', minWidth: 150, align: 'center', fixed: 'right' }
      ]
    }
  },
  methods: {
    addFuyang () {
      this.updateState = false
      this.fuyangInfo = {}
      this.fuyangModal = true
    },
    updateFuyang (item, id) {
      this.updateState = true
      this.updateid = id
      this.fuyangInfo = item
      this.fuyangModal = true
    },
    deleteFuyang (item, id) {
      console.log(item, id)
      let arr = []
      let that = this
      that.fuyangList.forEach(function (temp, index) {
        console.log(temp, index)
        if (index !== id) {
          arr.push(temp)
        }
      })
      that.fuyangList = arr
    },
    addFuyangOk () {
      let that = this
      if (!that.fuyangInfo.DF003) {
        this.$Notice.error({ title: '身份证校验不合规' })
        return
      }
      if (that.updateState) {
        let id = this.updateid
        that.fuyangList[id] = that.fuyangInfo
      } else {
        that.fuyangList.push(this.fuyangInfo)
      }
    },
    checkCardno (no) {
      if (no.length === 18) {
        let id = no
        let flag = true
        // 转换大小写
        id = id.toUpperCase()
        let arrVerifyCode = [1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2]
        let Wi = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]
        // let Checker = [1, 9, 8, 7, 6, 5, 4, 3, 2, 1, 1]
        if (id.length !== 15 && id.length !== 18) {
          flag = false
        }
        let Ai = id.length === 18 ? id.substring(0, 17) : id.slice(0, 6) + '19' + id.slice(6, 16)
        if (!/^\d+$/.test(Ai)) {
          flag = false
        }
        let yyyy = Ai.slice(6, 10)
        let mm = Ai.slice(10, 12) - 1
        let dd = Ai.slice(12, 14)
        let d = new Date(yyyy, mm, dd)
        let now = new Date()
        console.log(now)
        let year = d.getFullYear()
        let mon = d.getMonth()
        let day = d.getDate()

        // if (year !== yyyy || mon !== mm || day !== dd || d > now || year < 1800) {
        //   flag = false
        // }
        let ret = 0
        for (let i = 0; i < 17; i++) {
          ret += Ai.charAt(i) * Wi[i]
        }
        Ai += arrVerifyCode[(ret %= 11)]
        if (id.length === 18 && id !== Ai) {
          flag = false
        }
        console.log(year + '-' + mon + '-' + day)
        if (flag) {
          let num = no.charAt(16)
          if (num % 2 === 0) {
            this.fuyangInfo.DF003 = '10301002'
          } else {
            this.fuyangInfo.DF003 = '10301001'
            console.log('男')
          }
        } else {
          this.fuyangInfo.DF003 = ''
        }
      }
    },
    updateParams () {
      if (this.paramsData.code) {
        this.fuyangList = this.paramsData.paramData.fuyangList
      }
    }
  },
  mounted () {
  },
  watch: {
    paramsData: {
      deep: true,
      handler: function (newVal, oldVal) {
        this.$nextTick(() => {
          this.paramsData = newVal
          this.updateParams()
        })
      }
    }
  }
}
</script>
